<template>
    <div class="index">
        <div class="first">
            <h2>法规分类</h2>
            <el-button type="primary" round @click="dialogVisible1=true">添加法规</el-button>
        </div>
        <div class="last">
              <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="statuteTypeName"
        label="类别名称"
        >
      </el-table-column>
      <el-table-column
        prop="numberOfDocuments"
        label="文件数"
        >
      </el-table-column>
      <el-table-column
        prop="statuteTypeUpdateTime"
        label="更新时间">
      </el-table-column>
       <el-table-column
        prop="caozuo"
        label="操作">
        <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit"  @click="xiugai(scope.row)"></el-button>
<el-button type="primary" icon="el-icon-delete" @click="delet(scope.row)"></el-button>
</template>
      </el-table-column>
    </el-table>
    <!-- 修改框 -->
    <el-dialog
  title="修改法规名字"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <el-input v-model="input" placeholder="请输入修改名字"></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sure">确 定</el-button>
  </span>
</el-dialog>
 <!-- <div class="nex">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="5"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        <span class="demonstration" >直接前往</span>
      </div> -->

<!-- 添加框 -->
    <el-dialog
  title="提示"
  :visible.sync="dialogVisible1"
  width="30%"
  :before-close="handleClose">
  <el-input v-model="input1" placeholder="请输入法规的名字"></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="addfagu">确 定</el-button>
  </span>
</el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
      data() {
        return {
             input: '',
             input1:'',
             currentPage3:1,
             total:1,
             xiuname:0,
           dialogVisible: false,
           dialogVisible1:false,
          tableData: [{
            statuteTypeId:0,
            statuteTypeName: '维修手册',
            numberOfDocuments: '56',
            statuteTypeUpdateTime: '2018/2/02',
          }]
        }
      },
      methods:{
         handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page=val;
      this.xuanr();
    },
    switchDate: function (sj) {
      var now = new Date(sj);
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var date = now.getDate();
      return year + "-" + month + "-" + date;
    },
        //修改名字
        xiugai(ev){
          console.log(ev.statuteTypeId);
      this.xiuname= ev.statuteTypeId
        this.dialogVisible=true;
          
        }, 
        sure(){
          this.$axios({
            url:'/statuteType/update',
            method:'put',
            data:{
               "statuteTypeId":this.xiuname,
              "statuteTypeName": this.input
            }
          }).then((res)=>{
            console.log(res);
            this.input='',
            this.xuanr();
            this.dialogVisible=false;
          })
        },
        //删除
        delet(ev){
          console.log(ev.statuteTypeId);
          let statuteTypeId=ev.statuteTypeId;
          console.log(typeof statuteTypeId,statuteTypeId);
          this.$axios({
            url:'/statuteType/delete',
            method:'delete',
            data:new Number(statuteTypeId)
              
          }).then((res)=>{
            console.log(res);
            this.xuanr();
          })
        },
        //添加
        addfagu(){
          this.$axios({
            url:'/statuteType/add',
            method:'post',
            data:new String(this.input1),
            
          }).then((res)=>{
            console.log();
            this.dialogVisible1=false;
            this.input1='',
            this.xuanr();
          })
        },
        xuanr(){
          this.$axios({
          url:'/statuteType/list',
          method:'post',
          data:{
              limit: 100,
              page: 1        
          }
        }).then((res)=>{
          this.tableData=[];
          console.log(res.data.data);
          for(let i=0;i<res.data.data.length;i++){
            //转换一下时间错；
            res.data.data[i].statuteTypeUpdateTime = this.switchDate( res.data.data[i].statuteTypeUpdateTime);
            this.tableData.push(res.data.data[i]);
          }
        })
        },
         handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
      },
      mounted:function(){
        this.xuanr();
      }
    }
  </script>

<style scoped>
.first{
    display: flex;
     padding: 50px;
     justify-content: space-between
}
.last{
    margin-left: 120px;
    margin-top: 60px;
    border: 0px;
}
.el-table{
       border-bottom: 0px;
}
.nex {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-right: 20px;
}
</style>